<template>
  <el-table
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    lazy
  >
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="code" label="权限值" />
    <el-table-column prop="updateTime" label="修改时间" />
    <el-table-column label="操作">
      <template #="{ row }">
        <el-button
          type="primary"
          :disabled="row.level === 4"
          size="small"
          @click="addMenu(row)"
          >{{ row.level >= 3 ? `添加按钮` : `添加菜单` }}</el-button
        >
        <el-button
          type="warning"
          :disabled="row.level === 1"
          size="small"
          @click="editMenu(row)"
          >{{ row.level >= 3 ? `修改按钮` : `修改菜单` }}</el-button
        >
        <el-popconfirm
          :title="`确定删除【${row.name}】嘛？`"
          width="240px"
          @confirm="deleteMenu(row)"
        >
          <template #reference>
            <el-button type="danger" :disabled="row.level === 1" size="small">{{
              row.level >= 3 ? `删除按钮` : `删除菜单`
            }}</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    :title="
      menuFormData.id
        ? menuFormData.level === 3
          ? '修改按钮'
          : '修改菜单'
        : menuFormData.level !== 3
        ? '新增按钮'
        : '新增菜单'
    "
    v-model="dialogVisible"
  >
    <!-- 表单组件，收集数据 -->
    <el-form ref="form" label-width="80px">
      <el-form-item label="菜单名称">
        <el-input v-model="menuFormData.name" placeholder="请输入菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="权限值">
        <el-input v-model="menuFormData.code" placeholder="请输入权限值"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="saveMenuInfo">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reqAddMenu, reqAllMemuButton, reqDeleteMenu, reqEditMenu } from "@/api/acl/menu";
import { DataPermissionResData, MenuButtonDataObj } from "@/api/acl/menu/types";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
// 表格展示数据
const tableData = ref<MenuButtonDataObj[]>([]);
// 控制新增和修改菜单对话框的显示和隐藏
const dialogVisible = ref(false);
// 表单数据
const menuFormData = ref<MenuButtonDataObj>({
  pid: 0,
  name: "",
  code: "",
  level: 0,
});
// 页面的渲染完成后获取数据
onMounted(() => {
  getAllMenuButton();
});
// 获取全部的菜单和按钮
const getAllMenuButton = async () => {
  let result: DataPermissionResData = await reqAllMemuButton();
  if (result?.code === 200) {
    tableData.value = result.data;
  } else {
    ElMessage.error("获取菜单数据失败");
  }
};
// 添加菜单按钮
const addMenu = (row: MenuButtonDataObj) => {
  // 打开对话框
  dialogVisible.value = true;
  // 清空数据缓存
  menuFormData.value = {
    pid: 0,
    name: "",
    code: "",
    level: 0,
  };
  // 收集新增菜单的level和pid
  // 此处收集比较方便
  menuFormData.value.level = row.level + 1;
  menuFormData.value.pid = row.id as number;
};
// 修改菜单按钮
const editMenu = (row: MenuButtonDataObj) => {
  // 打开对话框
  dialogVisible.value = true;
  // 数据回显
  menuFormData.value = JSON.parse(JSON.stringify(row));
};
// 对话框确定按钮的回调
const saveMenuInfo = async () => {
  // 关闭对话框
  dialogVisible.value = false;
  if (menuFormData.value.id) {
    // 有id，则为修改菜单的请求
    let result: any = await reqEditMenu(menuFormData.value);
    if (result?.code === 200) {
      ElMessage.success("修改菜单成功");
      // 重新获取数据
      getAllMenuButton();
    } else {
      ElMessage.error("修改菜单失败");
    }
  } else {
    // 没有id，则为新增菜单的请求
    let result: any = await reqAddMenu(menuFormData.value);
    if (result?.code === 200) {
      ElMessage.success("新增菜单成功");
      // 重新获取数据
      getAllMenuButton();
    } else {
      ElMessage.error("新增菜单失败");
    }
  }
};
// 删除菜单按钮
const deleteMenu = async (row: MenuButtonDataObj) => {
  let result = await reqDeleteMenu(row.id as number);
  if (result?.code === 200) {
    ElMessage.success("删除菜单成功");
    // 重新获取数据
    getAllMenuButton();
  } else {
    ElMessage.error("删除菜单失败");
  }
};
</script>

<style scoped></style>
